<!--  -->
<template>
    <div class='main'>
        <div v-if="nodes.children && nodes.children.length > 0">
            <p :style="{ marginLeft: '20px' }">{{nodes.name   }}</p>
            <TreeCard v-for="p  in nodes.children" :key="p.name" :nodes="p"/>
        </div>
        <div v-else>
            <p> {{ nodes.name   }}</p>
        </div>
    </div>
</template>

<script>

export default {
    name: 'TreeCard',
    props: {
        nodes: {
            type: Object,
            default: {}
        },
        level: {
            type: Number,
            default: 0
        }   
    },
    components: {},
    data() {
        return {

        };
    },
    computed: {},
    watch: {},
    methods: {

    },
    created() {

    },
    mounted() {

    },
}
</script>
<style scoped>
.main {
    border: 1px solid red;
}
</style>